<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器的应用（一）</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box1{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            position: absolute;
            left: 0;
        }
        #box2{
            width: 100px;
            height: 100px;
            background-color: rgb(66, 180, 247);
            position: absolute;
            left: 100px;
        }
    </style>
</head>
<body>
    <br>
    <button id="btn01">点击按钮后box1向右移动</button>
    <button id="btn02">点击按钮后box1向左移动</button>
    <button id="btn03">点击按钮后box1向上移动</button>
    <button id="btn04">点击按钮后box1向下移动</button>
    <br>
    <br>
    <button id="btn05">点击按钮后box2向右移动</button>
    <button id="btn06">点击按钮后box1向左移动</button>
    <button id="btn07">点击按钮后box1向上移动</button>
    <button id="btn08">点击按钮后box1向下移动</button>
    <br>
    <br>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>
<script>
  
    // 获取box1
    var box1 = document.getElementById("box1");
    // 获取btn01 btn02 .....
    var btn01 = document.getElementById("btn01");
    var btn02 = document.getElementById("btn02");
    var btn03 = document.getElementById("btn03");
    var btn04 = document.getElementById("btn04");
    var btn05 = document.getElementById("btn05");
    var btn06 = document.getElementById("btn06");
    var btn07 = document.getElementById("btn07");
    var btn08 = document.getElementById("btn08");

    //定义一个变量，用来保存定时器的标识
    /*
        目前我们的定时器的标识由全局变量timer保存，
            所有的正在执行的定时器都在这个变量中保存
    */
    // var timer;📌⭐📌

/*原始函数
    // 点击按钮以后，使box1向右移动（left值增大）⭐⭐📌 原始函数
    btn01.onclick = function(){

        // 关闭上一个定时器 ,防止定时器重叠速度异常
        clearInterval(timer);

        // 开启一个定时器，用来执行动画效果
        timer = setInterval(function(){
            // 获取 box1 的原来的left值
            var oldValue = parseInt(getStyle(box1,"left"));

            // 在旧值的基础上增加（控制速度）
            var newValue = oldValue + 1;

            // 当 newValue 大于800时，使其等于800，防止等于 801 的情况
            if(newValue > 800){
                newValue = 800;
            }
            box1.style.left = newValue + "px";

            // 判断 newValue 是否等于800，
            if(newValue == 800){
                // 如符合判断则关闭定时器
                clearInterval(timer);
            }
        }, 30);
    };   
*/

    /*
        obj: 需要执行动画的对象     ⭐📌
        btn：控制开关按钮           ⭐📌
        direction：方向，left top  ⭐📌 
        count：方向，左右，上下     ⭐📌 
        distance：距离 0px 800px   ⭐📌
        ms：速度（帧率）            ⭐📌
    */
    // 尝试创建一个可以执行简单动画的函数  方向：右，下 📌
    function moveright(obj,btn,direction,count,distance){
        btn.onclick = function(){

            // 关闭上一个定时器 ,防止定时器重叠速度异常
            clearInterval(obj.timer);

            // 开启一个定时器，用来执行动画效果
            obj.timer = setInterval(function(){
                // 获取 obj 的原来的left值
                var oldValue = parseInt(getStyle(obj,direction));//obj 执行动画对象，direction 方向 上，下

                // 在旧值的基础上增加（控制速度）
                var newValue = oldValue + count; // count 控制方向⭐

                // 当 newValue 大于800时，使其等于800，防止等于 801 的情况
                if(newValue > distance){// distance 距离⭐
                    newValue = distance;
                }

                // 判断输入方向
                 obj.style[direction] = newValue + "px";

                // 判断 当newValue 等于0时，停止移动
                if(newValue == distance){
                    // 如符合判断则关闭定时器
                    clearInterval(obj.timer);
                }
            },30);
        };
    }

    // 尝试创建一个可以执行简单动画的函数 方向： 左，上 📌
    function moveleft(obj,btn,direction,count,distance){
        btn.onclick = function(){

            // 关闭上一个定时器 ,防止定时器重叠速度异常
            // 将 timer修改为obj.timer 使其不受其他元素影响 📌⭐📌
            clearInterval(obj.timer);

            // 开启一个定时器，用来执行动画效果
            obj.timer = setInterval(function(){
                // 获取 obj 的原来的left值
                var oldValue = parseInt(getStyle(obj,direction));//direction 方向 上，下

                // 在旧值的基础上增加（控制速度）
                var newValue = oldValue + count; // count 控制方向⭐

                // 当 newValue 大于800时，使其等于800，防止等于 801 的情况
                if(newValue < distance){// distance 距离⭐
                    newValue = distance;
                }

                // 判断输入方向
                if(direction == "left"){
                    obj.style.left = newValue + "px";
                }else if(direction == "top"){
                    obj.style.top = newValue + "px";
                }
                

                // 判断 当newValue 等于0时，停止移动
                if(newValue == distance){
                    // 如符合判断则关闭定时器
                    clearInterval(obj.timer);
                }
            },30);
        };
    }
    
    /*  box1 紫色
        右下
        move(启动按钮，"方向left/top",方向 下/右,距离,速度);
    */
    moveright(box1,btn01,"left",1,800);
    moveright(box1,btn04,"top",1,800);
    /*
        左上
        move(需要执行的元素,启动按钮，"方向left/top",方向 上/左,距离,速度);
    */
    moveleft(box1,btn02,"left",-1,0);
    moveleft(box1,btn03,"top",-1,0);

    /*  box2 蓝色
        右下
        move(启动按钮，"方向left/top",方向 下/右,距离,速度);
    */
    moveright(box2,btn05,"left",1,800);
    moveright(box2,btn08,"top",1,800);
    /*
        左上
        move(需要执行的元素,启动按钮，"方向left/top",方向 上/左,距离,速度);
    */
    moveleft(box2,btn06,"left",-1,0);
    moveleft(box2,btn07,"top",-1,0);

    
    // 定义一个函数，返回一个元素的 当前样式属性值
    function getStyle(obj,name){
        // 判断浏览器是否有该方法，使其兼容不同的浏览器
        if(window.getComputedStyle){
            // getComputedStyle() 返回一个元素的 当前样式属性值
            return getComputedStyle(obj,null)[name];
        }else{
            // 同上 写法不同（兼容IE8）
            return obj.currentStyle[name];
        }
    }
</script>
